<%= if @public_token do %>
  <script>
    window.publicToken = "<%= Phoenix.Token.sign(LogflareWeb.Endpoint, @conn.secret_key_base, @public_token) %>"
  </script>
<% end %>
<div class="subhead ">
  <div class="container mx-auto">
    <h5>~/logs/{link(@source.name, to: Routes.source_path(@conn, :show, @source), class: "text-primary")}</h5>

    <div class="log-settings">
      <ul>
        <li><a href="javascript:Source.scrollBottom();"><span id="scroll-down"><i class="far fa-arrow-alt-circle-down"></i></span> <span class="hide-on-mobile">scroll down</span></a></li>
        <li>
          <.team_link href={Routes.source_path(@conn, :explore, @source)} team={@team} target="_blank">
            <i class="fas fa-chart-bar"></i><span class="hide-on-mobile"> explore</span>
          </.team_link>
        </li>
        <li><a href="javascript:Source.switchDateFormat();"><span id="swap-date"><i class="fa fa-toggle-on pointer-cursor" aria-hidden="true"></i></span> <span class="hide-on-mobile">local time</span></a></li>
        <li>
          <.team_link navigate={Routes.source_live_path(@conn, LogflareWeb.Sources.RulesLive, @source.id)} team={@team}>
            <i class="fas fa-code-branch"></i><span class="hide-on-mobile"> rules</span>
          </.team_link>
        </li>
        <%= unless @source.system_source do %>
          <li><a href="#" data-toggle="modal" data-target="#sourceHelpModal"><i class="fas fa-info-circle"></i><span class="hide-on-mobile"> setup</span></a></li>
        <% end %>
        <li>
          <.team_link href={Routes.source_path(@conn, :clear_logs, @source)} team={@team}>
            <i class="fas fa-broom"></i><span class="hide-on-mobile"> clear cache</span>
          </.team_link>
        </li>
        <li>
          <.team_link href={Routes.source_path(@conn, :edit, @source)} team={@team}>
            <i class="fas fa-edit"></i><span class="hide-on-mobile"> edit</span>
          </.team_link>
        </li>
        <li><a href="mailto:support@logflare.app?Subject=Logflare%20Help" target="_top"><i class="fas fa-question-circle"></i> <span class="hide-on-mobile">help</span></a></li>
      </ul>
    </div>
  </div>
</div>
<div id="logs-list-stream-container" class="mt-4 container mx-auto console-text">
  <ul id="logs-list" class="list-unstyled console-text-list" hidden>
    <li :for={{log, inx} <- @logs |> Enum.with_index()} class="hover:tw-bg-gray-800">
      <span class="tw-whitespace-pre-wrap"><mark class="log-datestamp" data-timestamp={log.body["timestamp"]}>{log.body["timestamp"]}</mark> <mark :if={level = log.body["level"]} class={"log-level-#{level}"}>{level}</mark> {log.body["event_message"]}</span>
      <a class="metadata-link" data-toggle="collapse" href={"#metadata-#{inx}"} aria-expanded="false" class="tw-text-[0.65rem]">
        event body
      </a>
      <div class="collapse metadata" id={"metadata-#{inx}"}>
        <pre class="pre-metadata"><code><%= JSON.encode!(log.body, pretty: true) %></code></pre>
      </div>
      <%= if log.via_rule do %>
        <span data-toggle="tooltip" data-placement="top" title={"Matching #{ log.via_rule.lql_string } routing from #{log.origin_source_id }"} style="color: ##5eeb8f;">
          <i class="fa fa-code-branch" style="font-size: 1em;"></i>
        </span>
      <% end %>
    </li>
  </ul>
</div>
<div class="container mx-auto">
  <div>
    <%= form_for @conn, Routes.live_path(@conn, LogflareWeb.Source.SearchLV, @source), [method: :get], fn f -> %>
      <div class="form-group form-text">
        {text_input(f, :querystring, placeholder: "404", class: "form-control form-control-margin", autofocus: true)}
        {hidden_input(f, :tailing?, value: "true")}
        <%= if @team do %>
          {hidden_input(f, :t, value: @team.id)}
        <% end %>
      </div>
      <div id="observer-target"></div>
      <%= submit class: "btn btn-primary form-button" do %>
        <i class="fas fa-search"></i><span class="fas-in-button">Search</span>
      <% end %>
    <% end %>
    <small class="form-text text-muted">
      random(tips): {@search_tip}
    </small>
  </div>
</div>
<!-- Modal -->
{render(LogflareWeb.SourceView, "no_logs_modal.html", user: @user, source: @source, conn: @conn)}
<div id="__phx-assigns__" data-source-token={@source.token} data-logs={Poison.encode!(@logs)}></div>
<script src={Routes.static_path(@conn, "/js/source.js")}>
</script>

<script>
  document.addEventListener("DOMContentLoaded", async () => {
      await Source.main({scrollTracker: true}, {avgEventsPerSecond: <%= @source.metrics.avg %>})
    })
</script>
